<template>
  <div class="wrap">
    <div>
      <myNavbar title="签到"></myNavbar>
    </div>
    <div class="banner">
      <div class="banner_contain" @click="signInClick">
        <div class="banner_image">
          <div class="banner_image_outside">
            <div class="banner_image_within">
              <div v-if="isSignIn" class="banner_image_within_contain">
                <image mode="widthFix" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/sigin1.png"></image>
                <text>您已经签到</text>
              </div>
              <div v-else  class="banner_image_within_contain">
                <image style="  width: 50px; height: 50px;" mode="widthFix" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/sigin2.png"></image>
                <text style="color: white">立即签到</text>
              </div>
            </div>
          </div>
        </div>
        <div class="banner_title" >坚持连续签到可以获得丰富奖励哦</div>
      </div>
    </div>
    <div class="main" style="min-height:600px;">
      <div class="signIn" >
        <div class="signIn_item" v-for="(item,index) in signInGiftList">
          <div>

            <div v-if="item.isSignIn" class="signIn_item_top">
              <text class="signIn_item_top_title">{{item.rewardName}}</text>
              <text class="signIn_item_top_title">数量{{item.quantity}}</text>

            </div>
            <div v-else class="signIn_item_top signIn_item_top2">
              <text class="signIn_item_top_title">{{item.rewardName}}</text>
              <text class="signIn_item_top_title">数量{{item.quantity}}</text>
            </div>


            <div v-if="item.isSignIn" class="signIn_item_bottom">
              <text>第{{index+1}}天 </text>
            </div>
            <div v-else class="signIn_item_bottom signIn_item_bottom2">
              <text>第{{index+1}}天</text>
            </div>

          </div>
        </div>

      </div>
    </div>
    <div class="foot">
      <text class="foot_contain"><text class="contain_icon">?</text>温馨提示:每日签到可获得0成长和100U币奖励, 连续
        签到可以获得叠加奖励0成长值和500U币,并按天数叠加,
        连续签到满 13天后将会重置连续签到周期</text>
    </div>
    <div class="newIsmask" v-if="newPromotion1 == true">
      <div class="new_Box">
        <text class="new_header_box">恭喜签到成功</text>

        <div v-if="signInGiftList[0].type == 1" class="new_content_box">
          <div class="coupon-couponList " v-for="(item,index) in promotionForm1"  >
            <!-- <div class="coupon-couponList-port1">
              <div class="coupon-couponList-port1-inner">
                <text class="coupon-couponList-port1-text2">{{item.amount}}</text>
                <text class="coupon-couponList-port1-text1">折</text>
              </div>
            </div>
            <div class="coupon-couponList-port2">
              <div class="coupon-couponList-port2-text1">{{item.name}}</div>
              <div class="coupon-couponList-port2-text2">适用范围：
                <text>全场通用</text>
              </div>
              <div class="coupon-couponList-port2-text3">有限期至
                <text>{{item.endDate}}</text>
              </div>
            </div> -->

            <div  v-if="item.type == 1">
              <div class="coupon-couponList-port1">
                <div class="coupon-couponList-port1-inner">
                  <text class="coupon-couponList-port1-text2">{{item.amount}}</text>
                  <text class="coupon-couponList-port1-text1">折</text>
                </div>
              </div>
              <div class="coupon-couponList-port2">
                <div class="coupon-couponList-port2-text1">{{item.name}}</div>
                <div class="coupon-couponList-port2-text2">适用范围：
                  <text>{{item.tag}}</text>
                </div>
                <div class="coupon-couponList-port2-text3">有限期至
                  <text>{{item.endDate}}</text>
                </div>
              </div>
            </div>
            <div  v-if="item.type == 0">
              <div class="coupon-couponList-port1">
                <div class="coupon-couponList-port1-inner">
                  <text class="coupon-couponList-port1-text1">￥</text>
                  <text class="coupon-couponList-port1-text2">{{item.amount}}</text>
                </div>
              </div>
              <div class="coupon-couponList-port2">
                <div class="coupon-couponList-port2-text1">{{item.name}}</div>
                <div class="coupon-couponList-port2-text2">适用范围：
                  <text>{{item.tag}}</text>
                </div>
                <div class="coupon-couponList-port2-text3">有限期至
                  <text>{{item.endDate}}</text>
                </div>
              </div>
            </div>
            <div  v-if="item.type == 3">
              <div class="coupon-couponList-port1">
                <image :src="item.thumbnail"></image>
              </div>
              <div class="coupon-couponList-port2">
                <div class="coupon-couponList-port2-text1">兑换:
                  <text>{{item.name}}</text>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="signInGiftList[0].type == 0" class="new_content_box">
          <div class="coupon-couponList " v-for="(item,index) in signInGiftList">

            <div class="coupon-couponList-port1">
              <div class="coupon-couponList-port1-inner">
                <text class="coupon-couponList-port1-text2">{{promotionForm1.quantity}}</text>
                <text class="coupon-couponList-port1-text1">积分</text>
              </div>
            </div>
            <div class="coupon-couponList-port2">
              <div class="coupon-couponList-port2-text1" style="margin-bottom: 0px;">{{promotionForm1.rewardName}}</div>
            </div>
          </div>

        </div>

        <div style="width:100%;height:150px"></div>
        <div class="new_botton_box">
          <div class="new_botton" @click="clickAndGetClick1">
            <text class="new_botton_title">关闭</text>

          </div>
          <div style="width:100px;height:20px"></div>
        </div>
      </div>
      <!-- <text class="iconfont .icon-close newBotton" @click="canclePromotion1"></text> -->
    </div>
  </div>

</template>
<script>
import {
  list as signInList,signIn
} from '../../../api/signIn'
import {
  list as signInRecordList
} from '../../../api/signInRecord'
const storage = weex.requireModule('storage')
const eeui = app.requireModule('eeui');
import myNavbar from '../../../components/myNavbar/myNavbar.vue'
export default {
  name: 'index',
  data() {
    return {
      signInGiftList:[],
      isSignIn:false,
      banner_image:'https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/signIn1.png',
      checkRecord:[],
      signInRecord:[],
      cycle:'',
      signInId:"1",
      promotionForm1:[],
      newPromotion1: false,
    }
  },
  created() { // 在实例创建完成后被立即调用
    if (this.getGlobalData().token == null){
      eeui.openPage({url: 'root://pages/login/msgLogin.js',statusBarType: 'immersion',statusBarStyle:false},
          (result) => {
          }
      );
    }
    this.type = app.config.params;
    this.initIconFont();
    this.getdata()
  },
  components:{
    myNavbar
  },
  methods: {
    signInClick(){
      var _this = this
      signIn({signInId:this.data.signInId}).then(res=>{
        if(res.data.signInRecord.signInGift.type == 1){
          // _this.data.isSignIn = false
          // _this.setData({
          //   isSignIn:_this.data.isSignIn
          // })
          _this.isSignIn = false
          _this.getdata()
          // this.data.newPromotion1 = true
          // this.setData({
          //   newPromotion1:this.data.newPromotion1
          // })
          this.data.newPromotion1 = true
          if (res.data.couponCodeVoList.length > 0) {
            res.data.couponCodeVoList.forEach(function (item) {
              item.endDate = _this.formatDateAndTime(item.endDate)
            })
            // _this.data.promotionForm1 = res.data.couponCodeVoList
            // this.setData({
            //   promotionForm1:this.data.promotionForm1
            // })
            _this.promotionForm1 = res.data.couponCodeVoList
            // console.log(this.data.promotionForm1,"123321")
          }

          console.log(this.data.promotionForm1,"promotionForm1")
        }else{
          // _this.data.isSignIn = false
          // _this.setData({
          //   isSignIn:_this.data.isSignIn
          // })
          _this.isSignIn = false
          _this.getdata()
          // this.data.newPromotion1 = true
          // this.setData({
          //   newPromotion1:this.data.newPromotion1
          // })
          this.newPromotion1  = true
          console.log("0000000")
        }
      }).catch(res=>{
        if(res.content == "今日已签到"){
          // _this.data.isSignIn = true
          // _this.setData({
          //   isSignIn:_this.data.isSignIn
          // })
          _this.isSignIn = true
        }
      })
    },
    getList() {

      var _this = this
      signInList().then(res=>{
        console.log(res,"123")
        if(res.data.data.length>0){
          _this.cycle = res.data.data[0].cycle
          _this.signInId = res.data.data[0].id
          _this.signInGiftList = res.data.data[0].signInGiftList
        }
      })

      signInRecordList().then(res=>{
        // _this.data.isSignIn = res.data.isSignIn
        // _this.data.signInRecord = res.data.signInRecord
        // // _this.data.signInId = res.data.signInRecord[0].signInId
        // console.log(res,"res")
        // _this.setData({
        //   isSignIn: _this.data.isSignIn,
        //   signInRecord:_this.data.signInRecord,
        //   // signInId:_this.data.signInId,
        // })

        _this.isSignIn = res.data.isSignIn
        _this.signInRecord = res.data.signInRecord

      })
    },


    getdata(){

      new Promise((resolve, reject) => {
        // setTimeout(function () {
        // }, 1000)
        resolve() ;
        this.getList()
      }).then((data) => { // 因为new Promise返回的就是一个promise对象实例，所以这里可以链式操作

        var _this = this
        // console.log("123")
        setTimeout(()=>{
          // let i =0
          // let signQuantity = _this.data.cycle - _this.data.signInRecord.length
          // for( i=0; i<signQuantity;i++){
          //    _this.data.signInRecord.push({})
          // }
          // _this.setData({
          //   signInRecord:_this.data.signInRecord
          // })


          console.log( _this.signInRecord,"4123")
          let i = 0
          for(i=0; i<_this.signInRecord.length;i++){
            // _this.data.signInGiftList[i] =  _this.data.signInRecord[i].signInGift;
            // _this.data.signInGiftList[i].isSignIn = true;
            _this.signInGiftList[i] =  _this.data.signInRecord[i].signInGift;
            _this.signInGiftList[i].isSignIn = true;
          }

          // _this.setData({
          //   signInGiftList: _this.data.signInGiftList,
          // })



        },1000)
      })

    },
    //时间格式化器
    formatDateAndTime: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      let m = date.getMinutes();
      let s = date.getSeconds();
      return y + '-' + MM + '-' + d + " " + h + ":" + m + ":" + s;
    },

    // 获取签到活动
    popScreenClick1() {
      var _this = this
      signInList().then(res=>{
        console.log(res,"32131")
        if(res.data.data[0])
          this.newPromotion1 = true
        _this.promotionForm1 = res.data.data[0].signInGiftList

      })
    },
    canclePromotion1() {
      var _this = this
      _this.newPromotion1 = false

    },
    clickAndGetClick1() {
      this.newPromotion1 = false
    },
  },
}
</script>
<style lang="css" src="../../../style/wx.css" />
<style scoped>
.wrap{
  background-color:#ffffff;
}
.banner{
  width:750px;
  height: 440px;
  background-color: #f098ae;
}
.banner .banner_contain{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.banner .banner_image image{
  width: 236px;
  height: 236px;
  /* border-radius: 50%; */
  /*background-color:#fffffd;*/
}
.banner .banner_image .banner_image_outside{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 236px;
  height: 236px;
  border-radius: 50%;
  background-color:#fac9d4;
}
.banner .banner_image .banner_image_within{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 203px;
  height: 203px;
  border-radius: 50%;
  background-color:#fffffd;
}
.banner_image_within_contain{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.banner_image_within_contain text{
  padding-top: 15px;
  color: #b5b5b5;
  font-size: 30px;
}
.banner .banner_image .banner_image_within image{
  width: 50px;
  height: 50px;
}

.banner .banner_title{
  margin-top: 20px;
  color:#fffffd;
  font-size: 30px;
}


.main{
  margin: 30px 0 0 0;
  padding: 0 15px;
  background-color: #fff;
  border-radius: 6px;
}
.signIn{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.signIn_item{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 30px;
}


.signIn_item_top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 130px;
  font-size: 20px;
  border-radius: 6px 6px 0 0;
  /*text-align: center;*/
  /*background-color:#dcdedd;*/
  background-color:#f099ac;
}
.signIn_item_top2{
  background-color:#dcdedd;
}
.signIn_item_top2 image{
  width: 52px;
  height: 52px;
}

.signIn_item_top_title{
  text-align: center;
  letter-spacing: 1px;
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 1;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  line-height: 40px;
}
.signIn_item_top text{
  font-size:22px;
  color:#fcf5f6;
}
.signIn_item_bottom{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 55px;
  text-align: center;
  /* background-color: #f2eeef; */
  border: 1px solid #ebebeb;
  box-sizing: border-box;
  border-radius: 0 0 6px 6px;

}
.signIn_item_bottom2{
  background-color: #efefef;
}
.signIn_item_bottom text{
  color: #929292;
  font-size: 25px;
}
.foot{
  padding:50px 40px;
  /* height: 200px; */
  background-color: #f4f6f5;
}
.foot_contain{
  font-size: 26px;
  letter-spacing: 1px;
  color:#b9bbba;
}
.foot_contain .contain_icon{
  margin-right: 8px;
  padding: 0 11px;
  border-radius: 50%;
  border: 1px solid #b9bbba;
  font-size: 20px;
}





page {
  background: #fff;
}

.column_box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.top_nav {
  width: 100%;
  display: flex;
  padding-left: 20px;
  /* align-items: center; */
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 999;
  flex-direction: column;
}

.search_content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.title_log {
  width: 56px;
  height: 69px;
}

.search_input_content {
  width: 508px;
  height: 56px;
  border: 1px solid rgba(212, 215, 220, 0.5);
  opacity: 0.95;
  display: flex;
  /* margin-left: 20px; */
  align-items: center;
  border-radius: 50px;
  overflow: hidden;
}

.icon_search {
  margin-left: 20px;
}

.search_input {
  width: 420px;
  height: 56px;
  margin-left: 14px;
  font-size: 24px;
  display: flex;
  align-items: center;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  opacity: 0.89;
}


.addCart {
  position: fixed;
  top: 90vh;
  left: 0;
}

.newIsmask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.new_Box {
  padding: 40px 20px 0px;
  max-height: 700px;
  width: 550px;
  background-color: rgba(255, 0, 0, 1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.new_header_box {
  font-size: 40px;
  color: white;
}

.new_content_box {
  width: 100%;
  height: 500px;
  background-color: white;
  margin-top: 30px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.new_botton_box {
  width: 100%;
  height: 150px;
  background-color: rgba(240, 0, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  flex-direction: column;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.new_botton {
  padding: 20px 60px;
  background-color: bisque;
  border-radius: 60px;
}

.new_botton_title {
  color: black;
}

/* 优惠券 */
.coupon-couponList {
  display: flex;
  align-items: center;
  padding: 30px;
  background-color: #FEF7EF;
  border-radius: 16px;
  color: #FF1010;
  margin-bottom: 30px;
}

.coupon-couponList-port1 {
  margin-right: 20px;
  /* flex-grow:2; */
  width: 130px;
  height: 130px;

}

.coupon-couponList-port1-inner {
  width: 100%;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
}

.coupon-couponList-port1-text1 {
  font-size: 24px;
  padding-top: 20px;
}

.coupon-couponList-port1-text2 {
  font-size: 60px;
  font-weight: bolder;
  margin-right: 10px;
}

.coupon-couponList-port2-text1 {
  font-size: 30px;
  font-weight: bolder;
  margin-bottom: 10px;
}

.coupon-couponList-port2-text2 {
  font-size: 24px;
  color: #F48583;
  margin-bottom: 5px;
}

.coupon-couponList-port2-text3 {
  font-size: 24px;
  color: #F48583;
}

.shop-List {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.shop-list-image {
  width: 100px;
  height: 100px;
  border-radius: 12px;
}

.shop-list-content{
  width: 390px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
  height: 100px;
}
.shop-list-content-title{
  font-size: 24px;
}
.shop-list-content-price{
  font-size: 30px;
  color: rgba(255, 0, 0, 1);
}
.shop-list-content-number{
  font-size: 22px;
  color: rgba(0, 0, 0, 0.5);
}
.shop-list-content_box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.newBotton{
  font-size: 60px;
  margin-top: 30px;
  color: rgba(0, 0, 0, 0.2);
}

.coupon-couponList-port1 image{
  width: 130px;
  height:130px;
  border-radius: 6px;
}
.bgImg{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.coupon-couponList1{
  justify-content: space-around;
}
.coupon-couponList1 .rewardName{
  font-size: 25px;
}


</style>
